<template>
  <div class="detail_content">
    <p class="title">| 基本信息</p>
    <el-button class='base_btn' @click="orderChangeStatus" v-if='type == 1' size='mini' type='primary'>订单对账</el-button>
    <el-button class='base_btn' :disabled='true' v-if='type == 2' size='mini' type='danager'>已标记对账</el-button>
    <el-row class="base_info">
        <el-col :span='3'><span>结算时间:</span></el-col>
        <el-col :span='9'><p>{{detail.settle_time}}</p></el-col>
        <el-col :span='3'><span>收入类型:</span></el-col>
        <el-col :span='9'>
           <p v-if="detail.type == 1">订单入账 </p>
          <p v-if="detail.type == 5">拼团退还 </p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>订单类型:</span></el-col>
        <el-col :span='9'>
            <p v-if='order_info.order_type==1'>爆品商品</p>
             <p v-if='order_info.order_type==5'>现金券</p>
             <p v-if='order_info.order_type==10'>拼团</p>
             <p v-if='order_info.order_type==15'>会员专享商品</p>
             <p v-if='order_info.order_type==20'>优惠买单</p>
             <p v-if='order_info.order_type==25'>普通商品</p>
        </el-col>
           <el-col :span='3'><span>所属小店:</span></el-col>
        <el-col :span='9'><p>{{this.shopName}}</p></el-col>
    </el-row>
     <el-row class="base_info">
          <el-col :span='3'><span>支付单号:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.out_order_no'>{{order_info.out_order_no}}</p>
          <p v-else>---</p>
        </el-col>
               <el-col :span='3'><span>收支流水号:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.order_no'>{{order_info.order_no}}</p>
          <p v-else>---</p>
          </el-col>
    </el-row>

     <el-row class="base_info">
        <el-col :span='3'><span>付款账号:</span></el-col>
        <el-col :span='9'>
           <p v-if='username.username'>{{username.username}}</p>
          <p v-else>---</p>
        </el-col>
        <el-col :span='3'><span>支付渠道:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.pay_method ==1'>微信支付（小程序）</p>
          <p v-if='order_info.pay_method ==5'>支付宝支付</p>
          <p v-if='order_info.pay_method ==10'>微信支付（APP）</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>流水金额:</span></el-col>
        <el-col :span='9'>
           <p v-if='detail.settle_account'>¥ {{detail.settle_account}}</p>
           <p v-else>---</p>
        </el-col>
         <el-col :span='3'><span>收入金额:</span></el-col>
        <el-col :span='9'>
           <p v-if='detail.actual_amount'>{{detail.actual_amount}}</p>
           <p v-else>---</p>
        </el-col>
    </el-row>

    <p class="title">| 订单信息</p>
    <div class="order_infomation">
         <el-table
      :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="商品ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop='title'></el-table-column>
      <el-table-column label="购买数量" prop='quantity'></el-table-column>
      <el-table-column label="订单金额">
          ¥ {{order_info.total_amount}}
      </el-table-column>
      <el-table-column label="实付金额" >
          ¥ {{detail.actual_amount}}
      </el-table-column>
    </el-table>
    </div>
   
    <div class="class_btn">
       <el-button size ='mini' type="primary" @click="handleCancel">确定</el-button>
       <el-button size ='mini' type="danager" @click="handleCancel">取消</el-button>
    </div>

  </div>
</template>

<script>
import {shopIncomgetDetailData} from '@/api/finance'
export default {
    name: 'record_detail',
  props: [ 'visible', 'currentId','type', 'shopName'],
   data () {
    return {
      detail: {},
      order_info:{},
      username:{},
      tableData:[],
    }
  },
  watch: {
    visible (newValue) {
      if(newValue){
        console.log('显示值改变')
        this.getRecordDetailData()
      }
    }
  },
  methods:{
    orderChangeStatu(){
      console.log('修改状态')
      
    },
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
          this.$emit('func')
    },
    async getRecordDetailData(){
      let res = await  shopIncomgetDetailData(this.currentId);
      if(res.code === 10000){
        this.detail = res.data
        this.order_info = res.data.order
        this.username = res.data.username
        this.tableData = []
        if(this.detail.order_product){
          this.tableData.push(this.detail.order_product)
        }
      
      }else{
        this.$message.error(res.message)
      }
       
    }
  }
};
</script>


<style scoped lang="scss">
 .detail_content{
     padding: 20px;
     .title{
         font-size: 16px;
     }
     .base_btn{
       float: right;
     }
     .base_info{
         margin:15px 20px 20px; 
         span{
             font-size:12px;
             color: #999999;
         }

         p{
             font-size: 13px;
             color: #333333;
         }
     }
     .order_infomation{
       margin-top: 16px;
     }

     .class_btn{
       margin-top: 30px;
       text-align: center;
     }
 }
</style>

